import $ from 'jquery'

var dashboardModuel = (function(mod, document,undefined) {
	mod.default = {
		posionx: 100,
		posiony: 100,
		radius: 100,
		initLineWidth: 1,
		hasEdge: 0,
		fillText:0,
		textParams:{
			color:"#fff",
			fontStyle:"normal",
			fontWeight:"bold",
			fontSize:"14px",
			fontFamily:"Arial"
		},
		minValue:10,
		maxValue:1000,
		lineWidth: 10,
		colors: ["#ddd"],
		blankColor: "#fefefe",
		circleNum: 1,
		precent: [0.5]
	};
	mod.options = null;
	mod.radius = 0;
	mod.create = function(canvaid, opts) {
		var draw = document.getElementById(canvaid),
			context = draw.getContext("2d");
			context.clearRect(0,0,draw.width,draw.height);
		if (context) {
			this.options = $.extend({}, this.default, opts);
			this.radius = this.options.radius;
			this.draw(context);
			context.closePath();
		}
		else{
			console.error("不支持Canvas-2d绘图");
			return {};
		}
		return this.independenceMod(canvaid);
	};
	mod.draw = function(context) {
		for (var i = 0; i < this.options.circleNum; i++) {
			var strokecolor = this.options.colors[i] ? this.options.colors[i] : this.options.colors[this.options.colors.length - 1];
			var precent = this.options.precent[i] ? this.options.precent[i] : this.options.precent[this.options.precent.length - 1];
			//是否要画边缘
			if (this.options.hasEdge) {
				context.beginPath();
				context.strokeStyle = strokecolor;
				context.lineWidth = this.options.initLineWidth;
				context.arc(this.options.posionx, this.options.posiony, this.options.radius - context.lineWidth / 2, -Math.PI, 0, false);
				context.stroke();
				this.options.radius -= context.lineWidth;
			}
			//一圈时模拟仪器表的显示
			if(this.options.circleNum==1&&this.options.fillText){
				context.beginPath();
				context.fillStyle=this.options.textParams.color;
				context.font=this.options.textParams.fontStyle+" "+this.options.textParams.fontWeight+" "+this.options.textParams.fontSize+" "+this.options.textParams.fontFamily;
				var reg=/^\d+/;
				if(reg.test(this.options.textParams.fontSize)){
				  var fontHeight=parseInt(this.options.textParams.fontSize.match(reg)[0]);
				  context.textAlign="start";
				  context.fillText(this.options.minValue,this.options.posionx-this.radius,this.options.posiony+fontHeight,this.options.lineWidth);
				  context.fillText(this.options.maxValue,this.options.posionx+(this.radius-this.options.lineWidth),this.options.posiony+fontHeight,this.options.lineWidth);
			      var currentValue=this.options.precent[0]*this.options.maxValue;
			      context.textAlign="center";
			      context.font=this.options.textParams.fontStyle+" "+this.options.textParams.fontWeight+" "+fontHeight*2+"px "+this.options.textParams.fontFamily;;
                  context.fillText(currentValue,this.options.posionx,this.radius);
			    }
			    else{
			    	console.error("textParams.fontSize error");
			    	return false;
			    }
			}
			//画白色空的部分
			context.beginPath();
			context.strokeStyle = this.options.blankColor;
			context.lineWidth = this.options.lineWidth;
			context.arc(this.options.posionx, this.options.posiony, this.options.radius - context.lineWidth / 2, -Math.PI, 0, false);
			context.stroke();
			this.cycleAdd(context, precent, strokecolor,this.options);
			this.options.radius -= this.options.lineWidth;
		}
	};
	mod.cycleAdd = function(context,precent,strokecolor,options) {
		var tempradius = options.radius,
			num = 0;
		var si = setInterval(function() {
			if (num < parseFloat(precent)) {
				num += parseFloat(precent) / 100;
				context.beginPath();
				context.strokeStyle = strokecolor;
				context.lineWidth = options.lineWidth;
				context.arc(options.posionx, options.posiony, tempradius - context.lineWidth / 2, -Math.PI, (num - 1) * Math.PI, false);
				context.stroke();
			} else
				clearInterval(si);
		}, 1000 / 60);
	};
	mod.independenceMod=function(canvaid){
        var obj={
        	  canvaid:canvaid,
        	  refresh:function(value){
        	  	  this.options.precent=value;
        	  	  this.options.radius=this.radius;
        	  	  this.create(canvaid,this.options);
              }
           };
		for(var key in this){
			if(this.hasOwnProperty(key))
               obj[key]=this[key];
		}
		return obj;
	};
	return mod;
}(window.dashboardModuel||{}, document));

export default dashboardModuel;